<template>
	<view class="content_Thirteen">
		<view>{{$t('宣传视频')}}</view>
		<view class="content_Thirteen_video">
			<video  
				v-if="message.buy_videos"
				style="width: 630rpx;height: 312rpx;border-radius: 16rpx;" 
				id="myVideo" 
				:src="url+message.buy_videos"
				poster="https://example.com/your-cover-image.jpg" 
				@error="videoErrorCallback"
			/>
			<view v-if="!message.buy_videos" class="for-zw">{{$t('暂无信息')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		props: ['message','lang'],
		data() {
			return {
				IMAGE_URL,
				HTTP_IMG_UTL,
				url:'https://gluz-oss.oss-cn-beijing.aliyuncs.com'
			}
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		}
	}
</script>

<style scoped>
	.five-none{
		font-size: 24rpx;
		color: #999999;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.content_Thirteen_video {
		width: 630rpx;
		height: 312rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 24rpx;
	}

	.content_Thirteen {
		margin-top: 12rpx;
		width: 690rpx;
		height: 422rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 34rpx 30rpx 24rpx 30rpx;
	}
</style>